<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1{ 
				transition: all 1s;
			}
		</style>
	</head>
	<body style="width: 960px; margin: 0px auto;">
		<input type="button" value="放大" onclick="fangDa()" />
		<input type="button" value="转圈" onclick="zhuanQuan()" />
		<input type="button" value="倾斜" onclick="qingXie()" />
		<input type="button" value="位移" onclick="weiYi" />		
		<hr/>
		<img src="../image/xiaobai.jpg" width="400" id="d1" onclick="huanRen()" />
		<script>
			var dushu=0;
			var zhuanQuan = function(){
				dushu =dushu +360;
				d1.style.transform="rotate("+dushu+"deg)";
			};
			var fangDa =function(){
				d1.width=d1.width*1.2;
			};
			var qingXie=function(){
				d1.style.transform="skewX(5deg)";
			}
			var weiYi= function(){
				d1.style.transform="translate(10px,30px)";
			};
			var huanRen= function(){
				d1.src="../image/wangjiaer.jpg";
			};
		</script>
	</body>

</html>